import React from 'react';
import {NavLink,Routes,Route,Navigate,useRoutes,useNavigate,useInRouterContext} from "react-router-dom";
// import About from './pages/About.jsx';
// import Home from './pages/Home.jsx';
import routes from "./routes/index.js";

export default function App() {
    function computedClassName({isActive}){
        return isActive ? "list-group-item qilin" : "list-group-item" ;
    };
    const element=useRoutes(routes);
    const navigate=useNavigate();
    function forward(){
        navigate(1);
    };
    function back(){
        navigate(-1);
    };
    console.log(useInRouterContext());
    return (
        <div>
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h2>React Router Demo</h2></div>
                    <button onClick={forward}>前进</button>
                    <button onClick={back}>后退</button>
                </div>
            </div>
            <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                        {/* <a className="list-group-item active" href="./about.html">About</a>
                        <a className="list-group-item" href="./home.html">Home</a> */}
                        {/* 路由链接 */}
                        <NavLink className={computedClassName} to="/about">About</NavLink>
                        <NavLink className={computedClassName} end to="/home">Home</NavLink>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            {/* <Routes>
                                <Route path="/about" element={<About />}></Route>
                                <Route path="/home" element={<Home />}></Route>
                                <Route path="/" element={<Navigate to="/about" />}></Route>
                            </Routes> */}
                            {element}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};
